<script>
import {
  ENERGY_CONSUMPTION_STRUCTURE_SUB_TABLE,
  ENERGY_CONSUMPTION_STRUCTURE_TABLE,
  ENERGY_SAVING_RENOVATION_PROJECT_INFORMATION_TABLE,
  ENTERPRISE_BASIC_INFORMATION_TABLE_ID,
  PROGRESS_ENERGY_SAVING_TARGET_COMPLETION_TABLE,
  TABLE_OF_COMPREHENSIVE_ENERGY_CONSUMPTION_PER_UNIT_PRODUCT,
  ENTERPRISE_BASIC_INFORMATION_TABLE_NAME,
  TABLE_ACCOUNT_CONFIGS,
  COMPANY_PRODUCT_LIST,
  DETAILED_LIST_OF_COMPANY_INDICATORS,
  CONDITION_TABLE_OF_MAJOR_ENERGY_CONSUMING_EQUIPMENT,
} from '@/config';
import * as descriptionApi from '@/api/descriptionManagement'

export default {
  name: 'description-setting',
  data () {
    return {
      loading: false,
      lists: [],
      tIds: [
        ENTERPRISE_BASIC_INFORMATION_TABLE_ID,
        ENERGY_CONSUMPTION_STRUCTURE_TABLE.ID,
        ENERGY_CONSUMPTION_STRUCTURE_SUB_TABLE.ID,
        TABLE_OF_COMPREHENSIVE_ENERGY_CONSUMPTION_PER_UNIT_PRODUCT.ID,
        PROGRESS_ENERGY_SAVING_TARGET_COMPLETION_TABLE.ID,
        ENERGY_SAVING_RENOVATION_PROJECT_INFORMATION_TABLE.ID,
        COMPANY_PRODUCT_LIST.ID,
        DETAILED_LIST_OF_COMPANY_INDICATORS.ID,
        CONDITION_TABLE_OF_MAJOR_ENERGY_CONSUMING_EQUIPMENT.ID,
      ]
    };
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme;
    },
  },
  methods: {
    getTableName (tableAccountId) {
      // 企业基本情况表
      if (Number(tableAccountId) === ENTERPRISE_BASIC_INFORMATION_TABLE_ID) {
        return ENTERPRISE_BASIC_INFORMATION_TABLE_NAME;
      }
      let value, target;
      for (const key in TABLE_ACCOUNT_CONFIGS) {
        value = TABLE_ACCOUNT_CONFIGS[key];
        if (value.ID === Number(tableAccountId)) {
          target = value;
        }
      }
      if (target) {
        return target.NAME;
      }
      return '';
    },
    async loadItem (tableAccountId) {
      return descriptionApi.loadDescription(tableAccountId).then(res => res.data)
    },
    async queryLists () {
      this.loading = true;

      const rqs = this.tIds.map(tId => this.loadItem(tId))

      return Promise.all(rqs).then((res) => {
        // console.log(res)
        this.lists = this.tIds.map((v, i) => ({
          id: v,
          tableAccountId: v,
          name: this.getTableName(v),
          description: res[i] ? res[i].descriptionContent : ''
        }))
      }).finally(() => {
        this.loading = false
      })
    },
    edit (row) {
      this.$prompt('编辑填报说明', '操作提示', {
        inputType: 'textarea',
        customClass: 'description-setting-modal',
        inputValue: row.description || ''
      })
        .then(({ value }) => {
          console.log(encodeURIComponent(value));
        })
        .catch(() => {});
    },
    async save (item) {
      const { message } = await descriptionApi.saveOrUpdate({
        descriptionId: +item.tableAccountId,
        descriptionContent: item.description
      })
      this.$message.success(message || '')
    }
  },
  mounted () {
    this.queryLists();
  },
};
</script>

<template>
  <div class="padding width-100 height-100">
    <el-scrollbar class="scrollbar">
      <div class="description-setting width-100">
        <el-card
          v-for="item of lists"
          :key="item.id"
          class="description-item"
          shadow="never"
          :body-style="{ flex: 1 }"
        >
          <div class="flex align-center" slot="header">
            <h2
              class="description-head"
              :style="{
                'border-color': themeColor,
              }"
            >
              {{ item.name }}
            </h2>
            <el-link class="margin-left-auto" type="primary" @click="save(item)">
              保存
            </el-link>
          </div>
          <div class="description-content">
            <el-input type="textarea" resize="none" v-model="item.description"></el-input>
          </div>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss">
.description-setting-modal {
  width: 640px;
}
.description-setting-modal .el-textarea__inner {
  height: 250px;
}
.description-content .el-textarea__inner {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
    //background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
    background-color: rgba(144, 147, 153, .1);
    transition: 0.3s ease-in-out;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f9f9f9;
  }
}
</style>

<style scoped>
.description-setting {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 424px);
  grid-gap: 1rem;
}
.description-item {
  display: flex;
  flex-direction: column;
}
.description-head {
  margin: 0;
  font-weight: 500;
  padding-left: 15px;
  border-left: 4px solid;
}
.description-content {
  height: 100%;
}
.description-content ::v-deep .el-textarea,
.description-content ::v-deep .el-textarea__inner {
  height: 100%;
}
</style>
